<template>
  <div style="width: 60%;margin-left: 20%">
    <h1>菜品编辑添加</h1>
    <el-form ref="foodVo" :model="foodVo" label-width="80px">
      <el-form-item label="名称">
        <el-input v-model="foodVo.name"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="foodVo.price"></el-input>
      </el-form-item>
      <el-form-item label="详细">
        <el-input v-model="foodVo.info"></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <template #default="scope">
          <el-image  style="width: 600px" :src="foodVo.url"/>
        </template>
      </el-form-item>

      <el-form-item label="上传图片">
        <template>
          <el-upload class="avatar-uploader" action="" v-model="Addfrom.url" :http-request="uploadURL"
                     :multiple = true :before-upload="handleBeforeUpload" :limit="8">
            <img v-if="Addfrom.url"  class="avatar">
            <i v-else class="el-icon-upload2" style="width: 30px;font-size: 50px" ></i>
          </el-upload>
        </template>
        <template>
          <el-button type="" v-if="foodVo.url!==''" @click="deleteUrl">删除</el-button>
        </template>
      </el-form-item>

      <el-form-item label="">
        <el-row>
          <el-col :span="12">
            <span class="demonstration"></span>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link" @click="findAll">
                选择种类<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-plus" v-for="item in category"
                                    @click.native="selectCategory(item.id,item.cname)">{{ item.cname }}
                  </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
        <el-input v-model="foodVo.cname" readonly></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="updateFood" v-if="isEdit">修改</el-button>
        <el-button type="primary" @click="saveFood" v-if="!isEdit">添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import {client} from "../../api/alioss";
export default {
  name: "FoodUpdate",
  data() {
    return {
      fileList: [],
      Addfrom:{
        url:''
      },
      isEdit: true,
      id: '',
      foodVo: {
        id: '',
        info: '',
        price: '',
        url: '',
        name: '',
        cid: '',
        cname: ''
      },
      category: {
        cid: '',
        cname: ''
      }
    }
  },
  created() {
    if (this.$route.query.row == '' || this.$route.query.row == null){

      //修改为添加状态
      this.isEdit = false
    }else {
      this.foodVo = this.$route.query.row
    }
  },
  methods: {
    //删除tup
    deleteUrl(){
      this.foodVo.url = ''
    },
    //添加菜品
    saveFood(){
      this.$axios({
        method: 'post',
        url: '/admin/saveFood',
        data: this.foodVo
      }).then(res => {
        if (res.data.code == 2000) {
          alert('添加成功')
          this.findAll()
        } else {
          alert('添加失败')
        }
      })
    },
    //更新
    updateFood(){
      this.$axios({
        method: 'post',
        url: '/admin/updateFood',
        data: this.foodVo
      }).then(res => {
        if (res.data.code == 2000) {
          alert('修改成功')
          this.findAll()
        } else {
          alert('修改失败')
        }
      })
    },
    //选择菜品
    selectCategory(id, cname) {
      this.foodVo.cid = id
      this.foodVo.cname = cname
    },
    //获取所用种类
    findAll() {
      this.$axios({
        method: 'get',
        url: '/category/findAll',
      }).then(res => {
        this.category = res.data.data.data
      })
    },
    // 上传文件之前
    handleBeforeUpload(file) {
      const isJPEG = file.name.split('.')[1] === 'jpeg';
      const isJPG = file.name.split('.')[1] === 'jpg';
      const isPNG = file.name.split('.')[1] === 'png';
      const isWEBP = file.name.split('.')[1] === 'webp';
      const isGIF = file.name.split('.')[1] === 'gif';
      const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;
      if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
        this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
      }
      if (!isLt500K) {
        this.$message.error('单张图片大小不能超过 4mb!');
      }
      return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
    },
    uploadURL(file) {
      //注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以
      var fileName = 'image/'+'banner' + `${Date.parse(new Date())}` + '.jpg';
      //定义唯一的文件名，打印出来的uid其实就是时间戳
      client().multipartUpload(fileName, file.file,{
        progress: function(percentage, cpt) {
          console.log('打印进度',percentage)
        }
      }).then((res)=>{
        //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
        this.Addfrom.url = 'https://ghxt-atlbb.oss-cn-zhangjiakou.aliyuncs.com/' + fileName;
        console.log(this.Addfrom.url)
        this.foodVo.url = this.Addfrom.url
      })
    },

  }
}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
.change-icon{
  font-size:20px;
}

</style>
